<template>
    <div class="main">
        <p class="p1">
            <img src="../assets/back.png" alt="" @click="back()" class="backimg"> 
            <span class="span1"><input type="text" placeholder="请输入搜索内容" v-model="value" @keydown.enter="seek()">
            <a href="#" @click.prevent="seek()">搜索</a></span>
            
        </p>
    <div v-for="v in list" :key="v.id" class="d1" @click="audio(v)">

    <div class="div_img">
      <img :src="v.albumPicUrl" alt="">
    </div>
    <div>
      <p>作者：{{v.artistName}}</p>
      <p>专辑：{{v.albumName}}</p>
      <p>名称：{{v.musicName}}</p>
      <p>分类：{{v.navigationName}}</p>
    </div>
</div>
        </div>
</template>
<script>
import url from "../tools/url"
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import { Indicator } from 'mint-ui';

export default {
    name:"Seek",
    data() {
        return {
          selected:"搜索",
          value:"",
            list:[]
        }
    },
    methods: {
     back(){
         this.$router.go(-1);
     },
     seek(){
       Indicator.open();
  var tosat=Toast.loading({
  message: '加载中...',
  forbidClick: true,
  loadingType: 'spinner',
});
         var str=`token=${sessionStorage.getItem("token")}&keyword=${this.value}`
         this.axios.post(url.FINDBYKEYWORD,str).then(pro=>{
             console.log(pro);
             if(pro.data.code==200 &&pro.data.data.length>0){
                    this.list=pro.data.data;
                    Indicator.close();
             }else{
                Indicator.close();
                Toast('抱歉，没找到这个人');
             }
             
         })
         tosat.clear();
     },
     audio(v){
        this.$store.commit("audio",v)
      }
    },

    mounted() {
        
    },
    destroyed() {
        
    },
    filters:{

       
    }
}
</script>
<style scoped>
.p1{
     display:inline-block;vertical-align:middle;
     margin-top: 2%;
     width: 100%;
    display: flex;
}
.backimg{
    width: 10%;
    height: 1%;
    float: left;
    
}
.span1{
   float: left;
}
input{
    width: 80%;
    height: 90%;
}
.main{
  margin-bottom: 20px;
}
.van-tabs{
  width: 100%;
  position: fixed;
  margin-top:1%;
  z-index: 99;
}
.div_img{
  width: 36%;
}
img{
  width: 100%;
}
.d1{
  display: flex;
  background-color: white;
  padding: 10px;
  margin: 8px;
}
</style>